<!DOCTYPE html>
<html lang="en">
   	<head>
		<meta charset="UTF-8">
		<title>推荐客户</title>
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<meta name="keywords" content="这里写关键字">
		<meta name="description" content="这里写页面描述">
		<meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 
		<meta name="format-detection" content="telephone=no,email=no" />
		<link href="fontAwesome/css/font-awesome.min.css" rel="stylesheet">
		<link href="css/common.css" rel="stylesheet">
		<link href="css/main.css" rel="stylesheet">
		<script type="text/javascript" src="js/jquery.min.js"></script>
	</head>
</head>
<body>
	<div class="container">
		<div class="container-indexed-list">
			<div class="indexed-list-search">
				<form onclick="handleFormSubmit();"><input type="search" /></form>
				<i class="fa fa-search indexed-search"></i>
				<div class="header-placeholder">
					<i class="fa fa-search"></i>
					<span>搜索</span>
				</div>
			</div>
			<div class="indexed-list-inner">
				<div class="indexed-addBtn">
					<a href="javascript:;" class="recommend-customers-btn"><img src="images/addIcon.png">选择客户</a>
				</div>
				<ul>
					<li class="view-childen-list active">
						<div class="template-row-list">
							<label class="label-title">王凯</label>
							<div class="row-content">13817786478</div>
						</div>
						<i class="fa fa-check"></i>
					</li>
					<li class="view-childen-list">
						<div class="template-row-list">
							<label class="label-title">王凯</label>
							<div class="row-content">13817786478</div>
						</div>
						<i class="fa fa-check"></i>
					</li>
					<li class="view-childen-list">
						<div class="template-row-list">
							<label class="label-title">王凯</label>
							<div class="row-content">13817786478</div>
						</div>
						<i class="fa fa-check"></i>
					</li>
					<li class="view-childen-list">
						<div class="template-row-list">
							<label class="label-title">王凯</label>
							<div class="row-content">13817786478</div>
						</div>
						<i class="fa fa-check"></i>
					</li>
					<li class="view-childen-list">
						<div class="template-row-list">
							<label class="label-title">王凯</label>
							<div class="row-content">13817786478</div>
						</div>
						<i class="fa fa-check"></i>
					</li>
					<li class="view-childen-list">
						<div class="template-row-list">
							<label class="label-title">王凯</label>
							<div class="row-content">13817786478</div>
						</div>
						<i class="fa fa-check"></i>
					</li>
					<li class="view-childen-list">
						<div class="template-row-list">
							<label class="label-title">王凯</label>
							<div class="row-content">13817786478</div>
						</div>
						<i class="fa fa-check"></i>
					</li>
					<li class="view-childen-list">
						<div class="template-row-list">
							<label class="label-title">王凯</label>
							<div class="row-content">13817786478</div>
						</div>
						<i class="fa fa-check"></i>
					</li>
					<li class="view-childen-list">
						<div class="template-row-list">
							<label class="label-title">王凯</label>
							<div class="row-content">13817786478</div>
						</div>
						<i class="fa fa-check"></i>
					</li>
					<li class="view-childen-list">
						<div class="template-row-list">
							<label class="label-title">王凯</label>
							<div class="row-content">13817786478</div>
						</div>
						<i class="fa fa-check"></i>
					</li>
					<li class="view-childen-list">
						<div class="template-row-list">
							<label class="label-title">王凯</label>
							<div class="row-content">13817786478</div>
						</div>
						<i class="fa fa-check"></i>
					</li>
					<li class="view-childen-list">
						<div class="template-row-list">
							<label class="label-title">王凯</label>
							<div class="row-content">13817786478</div>
						</div>
						<i class="fa fa-check"></i>
					</li>
					<li class="view-childen-list">
						<div class="template-row-list">
							<label class="label-title">王凯</label>
							<div class="row-content">13817786478</div>
						</div>
						<i class="fa fa-check"></i>
					</li>
					<li class="view-childen-list">
						<div class="template-row-list">
							<label class="label-title">王凯</label>
							<div class="row-content">13817786478</div>
						</div>
						<i class="fa fa-check"></i>
					</li>
					<li class="view-childen-list">
						<div class="template-row-list">
							<label class="label-title">王凯</label>
							<div class="row-content">13817786478</div>
						</div>
						<i class="fa fa-check"></i>
					</li>
					<li class="view-childen-list">
						<div class="template-row-list">
							<label class="label-title">王凯</label>
							<div class="row-content">13817786478</div>
						</div>
						<i class="fa fa-check"></i>
					</li>
					<li class="view-childen-list">
						<div class="template-row-list">
							<label class="label-title">王凯</label>
							<div class="row-content">13817786478</div>
						</div>
						<i class="fa fa-check"></i>
					</li>
				</ul>
			</div>
		</div>
		<div class="fixed-footer footer-info">
			<div class="template-footer-list">
				<div class="template-footer-left">
					<div class="parallel-line-two">
						<p class="title">东方雅园</p>
						<p class="info-num">已选择客户<span class="num">2</span>人</p>
  					</div>
				</div>
				<div class="template-footer-right">
				<button class="btn btn-primary">推荐</button>
				</div>
			</div>
		</div>	
	</div>
</body>
<script type="text/javascript">
	$(function(){
		// 搜索框
		$(".indexed-list-search").click(function(){
			$(this).addClass("active");
			$(".indexed-list-search input").focus();
		})

		$(".indexed-list-search input").blur(function(){
		  if($(this).val().length < 1){
		  	$(".indexed-list-search").removeClass("active");
		  };
		});


		$(".view-childen-list").click(function(){
			$(this).addClass("active").siblings().removeClass("active");
			$(this).parents(".list-info-view-childen").siblings().find(".view-childen-list").removeClass("active");
		})

		var wHeight = $(window).height();
		$(".container-indexed-list").css("height",wHeight+"px")
		$(".indexed-list-inner").css("height",(wHeight-40)+"px")
	})

	function handleFormSubmit(event){
		event.preventDefault();
	}
</script>
</html>
